<template>
    <div>
        <el-card class="box-card">
            <template #header>
                <div class="clearfix">
                    <span>设备概览</span>
                </div>
            </template>

            <el-form>
                <el-form-item label="计划：">
                    <span>按量付费</span>
                </el-form-item>
                <el-form-item label="状态：">
                    <span>正常</span>
                </el-form-item>
            </el-form>
        </el-card>
        <el-card class="box-card">
            <template #header>
                <div class="clearfix">
                    <span>设备概览</span>
                </div>
            </template>

            <el-form :model="ruleForm" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="账号余额">
                    ￥{{ balance }}
                </el-form-item>
                <el-form-item label="充值金额" prop="amount">
                    <el-input v-model="ruleForm1.amount"></el-input>
                </el-form-item>
                <el-form-item label="备注" prop="desc">
                    <el-input v-model="ruleForm1.desc"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="add">充值</el-button>
                </el-form-item>
            </el-form>
        </el-card>
    </div>
</template>

<script lang="ts">
import { $AccInfo, $Balance } from '../../../api'
import { defineComponent, onMounted, reactive, toRefs } from 'vue';
import { useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';
export default defineComponent({
    name: 'AccForm',
    setup() {
        const router = useRouter()
        const Data = reactive({
            ruleForm: {
                amount: '11',
                type: 'recharge',
                desc: '1'
            },
            test: '11',
            balance: null
        })
        const ruleForm1 = reactive({
            amount: '',
            type: 'recharge',
            desc: ''
        })
        onMounted(() => {
            $Balance().then(res => {
                Data.balance = res.data.data.balance
            })
        })
        const add = () => {
            console.log(Data.ruleForm);

            $AccInfo(ruleForm1).then(res => {
                if (res.data.msg == 'success') {
                    ElMessage({
                        message: '充值成功！',
                        type: 'success',
                    })
                    ruleForm1.amount = ''
                    ruleForm1.desc = ''
                    // ruleForm1 = {
                    //     amount: '',
                    //     type: 'recharge',
                    //     desc: ''
                    // }
                    router.push('/jifei/pay')
                }
            })
        }


        return { ...toRefs(Data), add, ruleForm1 }
    }
    // data() {
    //     return {
    //         ruleForm: {
    //             amount: '',
    //             type: 'recharge',
    //             desc: ''
    //         },
    //         balance: null
    //     };
    // },

    // mounted() {
    //     $Balance().then(res => {
    //         this.balance = res.data.data.balance
    //     })
    // },

    // methods: {
    //     add() {
    //         $AccInfo(this.ruleForm).then(res => {
    //             if (res.data.msg == 'success') {
    //                 this.$message.success('充值成功！')
    //                 this.ruleForm = {
    //                     amount: '',
    //                     type: 'recharge',
    //                     desc: ''
    //                 }
    //                 this.$router.push('/jifei/pay')
    //             }
    //         })
    //     }
    // },
});
</script>

<style lang="less" scoped>
.el-card {
    margin: 10px 0;

    .el-form {
        width: 400px;
    }
}
</style>